<template>
    <div class="common-layout">
        <el-container>
            <el-affix>
                <el-aside width="210px" class="aside">
                    <!-- 左侧导航 -->
                    <left-menu/>
                    <!-- 左侧导航 结束 -->
                </el-aside>
            </el-affix>

            <el-container>
                <el-header class="header">
                    <header-bar></header-bar>
                </el-header>
                <el-main>
                    <el-scrollbar>
                        <router-view/>
                    </el-scrollbar>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import {onMounted, onUnmounted} from 'vue'
import {getmask} from "../lib/watermask"
import LeftMenu from "@/views/LeftMenu.vue"
import HeaderBar from "@/views/layout/HeaderBar.vue";

const {watermask} = getmask();
onMounted(() => {
    watermask("webrx.cn") //水印名
})
onUnmounted(() => {
    watermask("")
})
</script>

<style scoped>
.common-layout {
    height: 100vh;
}

.aside {
    width: 210px;
    height: 100vh;
    background-color: green;
}

.header {
    line-height: 60px;
    padding:0;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}


</style>
